<template>
  <div class="location">
    <!-- 顶部导航 -->
    <van-nav-bar class="topNaV" @click-left="onClickLeft">
      <template #title >
        <p class="title">城市定位</p>
      </template>
      <template #left >
        <van-icon name="arrow-left" color="#666666" />
        <p class="left">返回</p>
      </template>
    </van-nav-bar>
    <van-search
      v-model="value"
      @update:model-value="ipt"
      shape="round"
      placeholder="请输入搜索地址"
    />
    <!-- <form action="/" class="search-ipt">
      <van-search
        v-model.trim="value"
        shape="round"
        show-action
        placeholder="请输入搜索地址"
        @input="ipt(value)"
      />
    </form> -->
    <!-- <input
      type="text"
      v-model="value"
      @input="ipt(value)"
      placeholder="请输入搜索地址"
    /> -->
    <div>
      <div
        v-for="(item, index) in tips"
        :key="index"
        @click="upLocation(item)"
        class="tips"
      >
        <van-cell-group class="tips-item">
          <van-cell :title="item.name" is-link value="" title-class="tip-title">
          </van-cell>
        </van-cell-group>
      </div>
    </div>
    <div class="map">
      <p>当前位置:</p>
      <div id="container"></div>
    </div>
  </div>
</template>

<script setup>
import { useStore } from 'vuex'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import AMap from 'AMap'
const value = ref('')
const tips = ref([])
const store = useStore()
const router = useRouter()
const center = store.state.center
onMounted(() => {
  const map = new AMap.Map('container', {
    zoom: 16, // 级别
    center: center, // 中心点坐标
    viewMode: '2D' // 使用3D视图
  })
  const marker = new AMap.Marker({
    position: new AMap.LngLat(center[0], center[1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    title: store.state.title
  })
  // 将创建的点标记添加到已有的地图实例：
  map.add(marker)
  marker.setLabel({
    direction: 'top-center',
    // offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
    content: store.state.title // 设置文本标注内容
  })
})
const upLocation = (obj) => {
  store.commit('uplocation', obj)
  router.back()
}
const ipt = (val) => {
  autoInput(val)
}
// 获取输入提示信息
const autoInput = (val) => {
  const keywords = val
  AMap.plugin('AMap.AutoComplete', () => {
    const autoOptions = {
      city: '全国'
    }
    const autoComplete = new AMap.Autocomplete(autoOptions)
    autoComplete.search(keywords, function (status, result) {
      console.log('result', result)
      tips.value = result.tips
    })
  })
}
const onClickLeft = () => {
  router.back()
}
</script>

<script>
// import { mapState } from 'vuex';
export default {
  name: 'locationView'
}
</script>

<style scoped lang="scss">
#container {
  width: 710px;
  height: 342px;
}
.location {
  position: relative;
  .topNav {
    .nav-left {
      .left {
        font-size: 31.2px;
        color: #666666;
        letter-spacing: 0;
        font-weight: 400;
      }
    }
    .nav-title {
      .title {
        font-size: 36px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
      }
    }
  }
  .tips {
    .tips-item {
      .tip-title {
        width: 700px;
        font-size: 26px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 400;
        white-space: nowrap; /* 让文字在同一行显示，不换行 */
        overflow: hidden; /* 溢出部分隐藏 */
        text-overflow: ellipsis; /* 文字溢出部分省略号显示 */
        text-align: left;
        margin-left: 20px;
      }
    }
  }
  .map {
    position: absolute;
    top: 1050px;
    left: 20px;
    z-index: 9999;
    p {
      font-size: 30px;
      height: 50px;
      line-height: 50px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 500;
      text-align: left;
    }
  }
}
</style>
